<template>
  <div class="z-page">
    <h1 class="z-title">{{title}}</h1>
    <div class="z-tags">
      <p class="z-tags-tit">标签：</p>
      <div class="z-tags-wrap">
        <span v-for="(item, index) of tags" :key="item.id" class="z-tags-item">
          {{item.name}}
        </span>
        <em @click="editTags" class="edit-tag">{{tags.length === 0 ? '添加' : '编辑'}}标签</em>
      </div>
    </div>

    <div v-html="artical" class="z-page-content">
      
    </div>
    <Modal
      v-model="moduleIsShow"
      ok-text="应用"
      cancel-text="取消"
      :closable="false"
      :on-visible-change="visibleChange"
      :mask-closable="false"
      @on-ok="sureChoose"
      @on-cancel="cancelChoose"
      >
        <Tabs value="name1">
          <TabPane label="手工打标签" name="name1">
            <Input @input="triggerSearch" placeholder="请输入关键词" style="width: 100%">
              <Icon type="ios-search" slot="suffix" />
            </Input>
            <div class="search-wrap">
              <p v-if="searchRes.length === 0" class="empty-search">
                <span>暂无搜索结果</span>
              </p>
              <template v-else>
                <span
                  v-for="(tagItem, tagIndex) of searchRes"
                  :key="tagItem.id" 
                  @mousedown="selTag(tagItem)" 
                  :class="moduleData.findIndex(ite => ite.id === tagItem.id) !== -1 ? 'z-tag-primary' : ''"
                  class="z-tag"
                  >
                  {{tagItem.name}}
                </span>
                </template>
            </div>
          </TabPane>
          <TabPane label="自动打标签" name="name2">
            <p><span class="icon-refresh"></span></p>
            <span
              v-for="(tagItem, tagIndex) of allTags" 
              :key="tagItem.id" 
              @mousedown="selTag(tagItem)" 
              :class="moduleData.findIndex(ite => ite.id === tagItem.id) !== -1 ? 'z-tag-primary' : ''"
              class="z-tag"
            >
              {{tagItem.name}}
            </span>
          </TabPane>
        </Tabs>

      <!-- <Card :dis-hover="true" :key="item.cateId" v-for="(item, index) of tagCates" :bordered="false">
        <p slot="title">{{item.cateName}}</p>
        <span
          v-for="(tagItem, tagIndex) of item.tags" 
          :key="tagItem.id" 
          @mousedown="selTag(tagItem)" 
          :class="tags.findIndex(ite => ite.id === tagItem.id) !== -1 ? 'z-tag-primary' : ''"
          class="z-tag"
          >
          {{tagItem.name}}
        </span>
      </Card> -->
    </Modal>
  </div>
</template>
<script>
  var data = {
    artical1: {
      title: '国内临床医学实力最强的十所高校',
      artical: `<p>临床医学是时下较为热门的专业之一，每年都有相当数量的考生报考该专业。社会普遍认为医生这个职业是比较好的，不仅收入高，工作也体面。事实情况是大多数医生都要经历漫长的学习过程，并且工作中压力也较大，收入也没有外界想象的那么高，所以对于并不是很想读该专业的同学来说，还是要慎重考虑。目前临床医学专业，本科毕业就业情况不是很好，很多招聘单位都会倾向于招聘硕士毕业生、博士毕业生。因此，对于医学生来说，考研又是一道门槛。学业、就业带来的压力也不小。立志要从医救人的同学们也千万不要因此灰心，理想是要有的，这些也是支撑你走下的动力，人生道路的指路明灯。本期就来介绍一下国内临床医学的十大强校，希望在高考、考研时你可以进入这些理想的高校！</p><img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1474516366,3661248437&fm=173&app=25&f=JPEG?w=600&h=350&s=FB9224C40845A753065E5E000300B0DF" /><p>“985工程”高校中推荐山东大学、吉林大学、南京大学、武汉大学、西安交通大学等高校。“211工程”高校中推荐天津医科大学、苏州大学、郑州大学、南昌大学等高校。双非高校中推荐中国医科大学、南方医科大学、重庆医科大学、南京医科大学、广西医科大学、哈尔滨医科大学、青岛大学、广州医学院等高校。其实当年评估“211工程”高校时，很多高校因为没有参与合并，因此丧失了入选“211工程”高校的机会。但是这些双非院校中的实力强悍者，在医学界的认可度相当高，很多医院和科研单位都十分愿意接收这类高校的毕业生。选择这类高校也是不错的，就业、读研都是比较好的选择。</p>`,
      tags: [
        {
          name: '国内临床医学',
          id: 1
        },
        {           
          name: '糖尿病',
          id: 2 
        },
        {           
          name: '高血压',
          id: 3
        }
      ],
      allTags: [
        {
          name: '国内临床医学',
          id: 1
        },
        {           
          name: '糖尿病',
          id: 2 
        },
        {            
          name: '高血压',
          id: 3
        },
        {            
          name: '高血栓',
          id: 4
        },
        {            
          name: '高烧',
          id: 5
        },
        {
          name: '流感',
          id: 6
        }
      ]
    },
    artical2: {
      title: '是在预防疾病？还是在危害生命？',
      artical: `<p>
        大家好，从人口医学怎样走向个性化医学，是在预防疾病？还是在危害生命？在美国尽管抱有很高的希望，但我们的医疗保健系统仍然是一个一刀切的模式。有些人把这个称为人口模型。这个范例表明，在大多数人中，疾病无论是普通感冒还是癌症具有共同的预测轨迹，并且大多数人将受益于同一疗程的治疗。如果一个特定的治疗不起作用，那么第二个最有可能成功的治疗计划是规定的。这种情况一直持续到疾病缓解为止。根据可用的人口统计设置治疗，并使用试验和错误，直到病人是好的。在这种医学模式中，很少考虑个人特征、危险因素、生活方式选择和遗传学。因此，治疗方法在所有情况下都不理想，而不符合“平均”参数的患者则不理想。</p>
  <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1512967465,1703821434&fm=173&app=25&f=JPEG?w=640&h=390&s=B52092194F624D0B4EE9B5DA0300D0B3">
<p>另一方面，个性化医疗提倡医疗保健的定制。它旨在预防疾病，以及针对个体定制治疗，以便疾病或疾病能够以基于个体属性的承诺最大成功机会的方式作为目标。这种方法的一个基本假设是个性化医学（PM）考虑到药物和干预措施将根据被治疗的人具有不同的效果。基因组时代的卫生技术既然科学拥有体内所有基因的完整地图，个性化的医学正在成为现实。国家人类基因组研究所强调，个性化医学包括使用患者的基因概况来指导有关预防、诊断和治疗的决策。现代健康技术现在允许检查个体的基因组，以便检测特定的特征或异常。安吉丽娜朱莉公开披露携带BRCA1基因突变，这使她处于乳腺癌和卵巢癌的高风险，引起了公众的注意。
      </p>
      <p>大家好，从人口医学怎样走向个性化医学，是在预防疾病？还是在危害生命？在美国尽管抱有很高的希望，但我们的医疗保健系统仍然是一个一刀切的模式。有些人把这个称为人口模型。这个范例表明，在大多数人中，疾病无论是普通感冒还是癌症具有共同的预测轨迹，并且大多数人将受益于同一疗程的治疗。如果一个特定的治疗不起作用，那么第二个最有可能成功的治疗计划是规定的。这种情况一直持续到疾病缓解为止。根据可用的人口统计设置治疗，并使用试验和错误，直到病人是好的。在这种医学模式中，很少考虑个人特征、危险因素、生活方式选择和遗传学。因此，治疗方法在所有情况下都不理想，而不符合“平均”参数的患者则不理想。</p>
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3890864325,1761764739&fm=173&app=25&f=JPEG?w=640&h=480&s=C031877018D857DC941BF247030020ED">
<p>另一方面，个性化医疗提倡医疗保健的定制。它旨在预防疾病，以及针对个体定制治疗，以便疾病或疾病能够以基于个体属性的承诺最大成功机会的方式作为目标。这种方法的一个基本假设是个性化医学（PM）考虑到药物和干预措施将根据被治疗的人具有不同的效果。基因组时代的卫生技术既然科学拥有体内所有基因的完整地图，个性化的医学正在成为现实。国家人类基因组研究所强调，个性化医学包括使用患者的基因概况来指导有关预防、诊断和治疗的决策。现代健康技术现在允许检查个体的基因组，以便检测特定的特征或异常。安吉丽娜朱莉公开披露携带BRCA1基因突变，这使她处于乳腺癌和卵巢癌的高风险，引起了公众的注意。</p>`,
      tags: [
        {
          name: '国内临床医学',
          id: 1
        },
        {           
          name: '糖尿病',
          id: 2 
        },
        {           
          name: '高血压',
          id: 3
        }
      ],
      allTags: [
        {
          name: '国内临床医学',
          id: 1
        },
        {           
          name: '糖尿病',
          id: 2 
        },
        {            
          name: '高血压',
          id: 3
        },
        {            
          name: '高血栓',
          id: 4
        },
        {            
          name: '高烧',
          id: 5
        },
        {
          name: '流感',
          id: 6
        }
      ]
    }
  }
  export default {
    mounted () {
      var id = this.$route.params.id
      this.tags = data['artical' + id].tags
      this.allTags = data['artical' + id].allTags
      this.artical = data['artical' + id].artical
      this.title = data['artical' + id].title
    },
    data () {

      return {
        title: '',
        moduleIsShow: false,
        tags: [],
        allTags: [],
        searchRes: [],
        moduleData: [],
        artical: ''
      }
    },
    computed: {
      results (keywords) {
        
      }
    },
    methods: {
      sureChoose () {
        let res = []
        this.searchRes = []
        
        this.tags = this.moduleData
        console.log(this.tags)
      },
      cancelChoose () {
        this.searchRes = []
      },
      visibleChange (vs) {
        console.log(vs)
      },
      triggerSearch (keywords) {
        let self = this
        this.timer && clearTimeout(this.timer)
        this.timer = setTimeout(function () {
          self.searchRes = self.search(keywords)
        }, 100)
      },
      search (keywords) {
        let self = this
        if (!keywords) return []
        return this.allTags.filter(item => {
          return item.name.indexOf(keywords) !== -1
        })
      },
      selTag (tag) {
        let index = this.moduleData.findIndex(item => item.cateId === tag.cateId && item.id === tag.id) 
        if (index === -1) {
          this.moduleData.push(tag)
        } else {
          this.moduleData.splice(index, 1)
        }
      },
      editTags () {
        this.moduleIsShow = true
        this.moduleData = this.tags.slice()
      }
    }
  }
</script>
<style >
.search-wrap{
  padding: 20px 0 0;
}
.empty-search {
  text-align: center;
  color: #ccc;
}
.z-page {
  padding: 10px 20px 20px;
  margin: 40px auto;
  width: 980px;
  background: #fff;
  border-radius: 4px;
} 
.z-page .z-title {
  text-align: center;
  font-size: 24px;
  margin: 0;
  padding: 10px 0;
  font-weight: normal;
}
.z-page .z-page-content {
  margin-top: 20px;
}
.z-page .z-page-content p{
  margin-bottom: 10px;
  font-size: 14px;
  text-indent: 2em;
}
.z-page .z-tags .edit-tag {
  border: 1px dashed #ccc;
  color: inherit;
  font-style: normal;
  padding: 2px 12px;
  font-size: 12px;
  border-radius: 2px;
  cursor: pointer;
  border-radius: 4px;
}
.z-page .z-tags {
  text-align: center;
}
.z-page .z-tags .z-tags-tit {
  display: inline-block; 
}
.z-page .z-tags-wrap {
  display: inline-block;
}
.z-page img {
  margin: 10px 20px 20px;
}
.z-tag {
  transition: .3s;
  display: inline-block;
  height: 22px;
  line-height: 22px;
  margin: 2px 4px 2px 0;
  padding: 0 8px;
  border: 1px solid #e8eaec;
  border-radius: 3px;
  background: #f7f7f7;
  font-size: 12px;
  vertical-align: middle;
  opacity: 1;
  overflow: hidden;
  cursor: pointer;
}
.z-tag:hover {
  opacity: .85;
}
.z-tag.z-tag-primary {
  background: #2d8cf0;
  border-color: #2d8cf0;
  color: #fff;
}
.z-tag.z-tag-primary:after {
  display: inline-block;
  position: relative;
  top: -2px;
  content: '×';
  padding-left: 4px;
  font-size: 12px;
}
.z-tag.z-default {

}
.z-page .z-tags-item {
  margin-right: 6px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 1px 6px;
}
.icon-refresh {
  margin-top: -10px;
  cursor: pointer;
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url(../../../assets/img/refresh.png) center center no-repeat;
}

/*.icon-refresh:active {
  transition: .6s;
  transform: rotate(180deg);
}*/

</style>
